<template>
  <div class='mobile-multiFill-wrapper'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "multiFill_related"'>
      请检查答案
    </div>
    <ul class='option-list'>
      <li class='option-item'
          v-for='(option, index) of question.optionList'
          :key='index'>
        <div class='item-title' v-html='option.title'></div>
        <!-- 各填空项验证提示 -->
        <div class='valid-tip-item'
             v-show='option.validType === "required"'>
          请输入内容
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_length"'>
          请输入{{option.minLength}}~{{option.maxLength}}个字
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_text"'>
          格式有误，请输入文本
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_number"'>
          格式有误，请输入数字
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_en"'>
          格式有误，请输入字母
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_cn"'>
          格式有误，请输入中文
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_email"'>
          格式有误，请输入Email地址
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_phone"'>
          格式有误，请输入手机号码
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_url"'>
          格式有误，请输入网址
        </div>
        <div class='valid-tip-item'
             v-if='option.validType === "fill_indentification"'>
          格式有误，请输入身份证
        </div>
        <div class='item-content'>
          <!-- size 是 small -->
          <input
            v-if='!option.size || option.size === "small"'
            class='multiFill-input'
            :class='{
              recordCorrect:option.isRecordCorrect && question.useAnswer,
              recordError:option.isRecordError && question.useAnswer
            }'
            type="text"
            v-model.trim='option.resultText'
            @focus='resetValidType'
            :disabled='isRecord'>
          <!-- size 是 middle 或 large -->
          <textarea
            v-if='option.size === "middle" || option.size === "large"'
            class='multiFill-textarea'
            :class='{
              middle: option.size === "middle",
              large: option.size === "large",
              recordCorrect:option.isRecordCorrect && question.useAnswer,
              recordError:option.isRecordError && question.useAnswer
            }'
            type='text'
            v-model.trim='option.resultText'
            @focus='resetValidType'
            :disabled='isRecord'>
          </textarea>
        </div>
      </li>
    </ul>
    <!-- 答案相关 -->
    <div class='qa-answer'
         v-if='isRecord && question.useAnswer'>
      <!-- 分值 -->
      <div class='qa-score-wrapper'
           v-show='question.scoringWay === "ALL_RIGHT_RESULT_SAME" ||
                   question.scoringWay === "ALL_RIGHT_RESULT_CONTAIN"'>
        <div class='score-label'>分值：</div>
        <div class='score-number'>{{question.score || 0}}分</div>
      </div>
      <div class='qa-answer-parse'
           v-show='question.scoringWay === "RIGHT_SCORE_RESULT_SAME" ||
                   question.scoringWay === "RIGHT_SCORE_RESULT_CONTAIN"'>
        <div class='answer-title'>分值：</div>
        <li class='answer-list'
            v-for='(option, index) of question.optionList'
            :key='"answer" + index'>
          <span class='answer-ordinal'>填空{{index + 1}}:</span>
          {{option.score}}分
        </li>
      </div>
      <!-- 计分方式 -->
      <div class='qa-answer-parse'>
        <div class='answer-title'>计分方式：</div>
        <div class='answer-content'
             v-show='question.scoringWay === "ALL_RIGHT_RESULT_SAME"'>
          全对，回答与答案相同得分
        </div>
        <div class='answer-content'
             v-show='question.scoringWay === "ALL_RIGHT_RESULT_CONTAIN"'>
          全对，回答中包含答案得分
        </div>
        <div class='answer-content'
             v-show='question.scoringWay === "RIGHT_SCORE_RESULT_SAME"'>
          正确选项，回答与答案相同得分
        </div>
        <div class='answer-content'
             v-show='question.scoringWay === "RIGHT_SCORE_RESULT_CONTAIN"'>
          正确选项, 回答中包含答案得分
        </div>
      </div>
      <!-- 正确答案 -->
      <div class='qa-answer-parse'>
        <div class='answer-title'>正确答案：</div>
        <li class='answer-list'
            v-for='(option, index) of question.optionList'
            :key='"answer" + index'>
          <div class='answer-label'>填空{{index + 1}}:</div>
          <ul class='answer-item-list'>
            <!-- <li class='answer-label'>填空{{index + 1}}:</li> -->
            <li class='answer-none' v-show='!option.answers[0]'>无</li>
            <li class='answer-item'
                v-for='(answer, index) of option.answers'
                :key='"option" + index'>
              {{answer}}
            </li>
          </ul>
        </li>
      </div>
      <!-- 答案解析 -->
      <div class='qa-answer-parse'
           v-if='question.answerParse'>
        <div class='answer-title'>答案解析：</div>
        <div class='answer-content' v-html='question.answerParse'></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mobileMultiFill',
  data () {
    return {}
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    resetValidType () {
      this.question.validType = ''
      this.question.optionList.forEach(option => {
        option.validType = ''
      })
    },
    init () {
      // 获取每个填空选项的扩展配置项
      this.question.optionList.forEach(option => {
        let extendAttr = JSON.parse(option.extendAttr || '{}')
        if (extendAttr.size) {
          option.size = extendAttr.size
        }
        if (extendAttr.defaultText) {
          option.resultText = extendAttr.defaultText
        } else {
          option.resultText = ''
        }
      })
      // console.log('optionList: ', this.question.optionList)
      // console.log('question: ', this.question)
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        // 获取答案
        this.question.optionList.forEach(option => {
          option.isRecordCorrect = false
          option.isRecordError = false
          if (option.textResult) {
            option.answers = option.textResult.split(/;|；/)
          } else {
            option.answers = []
          }
        })
        // 获取用户填写的内容
        if (this.question.answer) {
          // let optionResults = this.question.answer.optionResults
          let optionResults = this.question.answer
          this.question.optionList.forEach(option => {
            let targetOption = optionResults.filter(item => item.optionId === option.optionId)[0]
            if (targetOption) {
              option.resultText = targetOption.resultText || ''
            }
            // 如果题目或选项是选填，且没有输入答案，则不显示对错
            if ((!this.question.required || option.isOptional) && !option.resultText) {
              option.isRecordCorrect = false
              option.isRecordError = false
            // 否则，根据计分规则显示答案的对错
            } else {
              let isMatch
              // 如果是回答与答案相同得分
              if (this.question.scoringWay === 'ALL_RIGHT_RESULT_SAME' ||
                  this.question.scoringWay === 'RIGHT_SCORE_RESULT_SAME') {
                isMatch = option.answers.filter(answer => answer === option.resultText)[0]
              // 如果是回答中包含答案得分
              } else if (this.question.scoringWay === 'ALL_RIGHT_RESULT_CONTAIN' ||
                         this.question.scoringWay === 'RIGHT_SCORE_RESULT_CONTAIN') {
                isMatch = option.answers.filter(answer => option.resultText.indexOf(answer) !== -1)[0]
              }
              // 如果与正确答案匹配成功
              if (isMatch) {
                option.isRecordCorrect = true
              // 如果没有设置正确答案
              } else if (!option.answers[0]) {
                option.isRecordCorrect = true
              } else {
                option.isRecordError = true
              }
            }
          })
        }
      }
      console.log('question: ', this.question)
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.mobile-multiFill-wrapper
  margin-top 10px
  .valid-tip-box
    color #ef6262
    font-size 14px
    margin-bottom 5px
  .option-list
    .option-item
      margin-bottom 10px
      &:last-child
        margin-bottom 0
      .item-title
        margin-bottom 10px
        line-height 1.4
        font-size 14px
        >>> img, >>> iframe, >>> video
          max-width 100%
      .valid-tip-item
        color #ef6262
        font-size 14px
        margin-bottom 5px
      .item-content
        .multiFill-input
          display block
          width 100%
          height 36px
          line-height 18px
          padded_box(border-box, 9px 10px)
          font-size 14px
          background #fff
          border 1px solid #dde5ed
          border-radius 4px
          outline none
          -webkit-appearance: none
          &:focus
            border-color #2672ff
          &:disabled
            opacity 1
          &.recordCorrect
            background rgba(33, 166, 90, 0.1)
            border-color #21a65a
          &.recordError
            background rgba(182, 44, 44, 0.1)
            border-color #b62c2c
        .multiFill-textarea
          display block
          width 100%
          line-height 1.5
          padded_box(border-box, 5px 10px)
          font-size 14px
          background #fff
          border 1px solid #dde5ed
          border-radius 4px
          resize none
          outline none
          -webkit-appearance: none
          scroll()
          &:disabled
            opacity 1
          &:focus
            border-color #2672ff
          &.middle
            height 72px
          &.large
            height 108px
          &.recordCorrect
            background rgba(33, 166, 90, 0.1)
            border-color #21a65a
          &.recordError
            background rgba(182, 44, 44, 0.1)
            border-color #b62c2c
  .qa-answer
    margin 15px 0 10px
    border-top 1px dashed #dde5ed
    .qa-score-wrapper
      border-bottom 1px dashed #dde5ed
      padding 10px
      display flex
      align-items center
      .score-label
        font-size 14px
        color #333
      .score-number
        font-size 14px
        color #aaa
    .qa-answer-parse
      border-bottom 1px dashed #dde5ed
      border-radius 4px
      padding 10px
      .answer-title
        font-size 14px
        color #333
        margin-bottom 10px
      .answer-list
        margin-bottom 5px
        font-size 14px
        line-height 1.5
        color #aaa
        display flex
        .answer-ordinal
          margin-right 8px
        .answer-label
          flex none
          font-size 14px
          color #aaa
          margin 0 6px 6px 0
          padding 3px 4px 3px 0
          border-radius 2px
          line-height 14px
          border 1px solid transparent
        .answer-item-list
          display flex
          flex-wrap wrap
          .answer-none, .answer-item
            font-size 14px
            color #aaa
            margin 0 6px 6px 0
            padding 3px 4px
            border-radius 2px
            line-height 14px
            border 1px solid transparent
          .answer-item
            border-color #ccc
          .answer-none
            padding-left 0
      .answer-content
        font-size 14px
        line-height 1.5
        color #aaa
        >>> img, >>> iframe, >>> video
          max-width 100% !important
</style>
